import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
import styles from '@/views/NewApply/ApplyDetail.less'

@Component({})
export default class TipsDialog extends Vue {
  @Prop({ default: '提示' }) private title!: string
  @Prop({}) private content!: string
  @Prop({}) private visible!: boolean
  @Prop({ default: () => ['取消', '确认'] }) private btns!: string[]
  protected render(h: any) {
    return (
      <div class={{ [styles.sealDetail]: true }}>
        <el-dialog
          title={this.title}
          custom-class="custom-dialog"
          width={'500px'}
          close-on-click-modal={false}
          close-on-press-escape={false}
          visible={this.visible}
          {...{
            on: { 'update:visible': this.visibleChange },
          }}
        >
          <div class="f14 pl30 pt10" style="height: 112px;">
            {this.content}
          </div>
          <div slot="footer">
            <el-button
              onClick={() => {
                this.$emit('visibleChange', false)
              }}
            >
              {this.btns[0]}
            </el-button>
            <el-button
              type="primary"
              class={[{ 'btn-primary': true, 'btn-primary-hover': true }]}
              onClick={() => {
                this.$emit('confirm', false)
              }}
            >
              {this.btns[1]}
            </el-button>
          </div>
        </el-dialog>
      </div>
    )
  }

  @Emit('visibleChange')
  private visibleChange(val: boolean) {
    return val
  }
}
